/**
 * 基本CSS,模块化CSS
 */

/**
 * 字数超出省略号
 */

.text-ellipsis {
	text-overflow: ellipsis;
	white-space: nowrap;
	display: block;
	overflow: hidden;
}

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

.text-left {
	text-align: left;
}

.clearPadding {
	padding: 0 !important;
}

.clearMargin {
	margin: 0 !important;
}

.cplr{
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.clearMarginLeftAndRight {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.clearPaddingLeft {
	padding-left: 0 !important;
}

.clearPaddingRight {
	padding-right: 0 !important;
}

.clearPaddingTop {
	padding-top: 0 !important;
}

.clearPaddingBottom {
	padding-bottom: 0 !important;
}

.clearMarginLeft {
	margin-left: 0 !important;
}

.clearMarginRight {
	margin-right: 0 !important;
}

.clearMarginTop {
	margin-top: 0 !important;
}

.clearMarginBottom {
	margin-bottom: 0 !important;
}

.marginTop5 {
	margin-top: 5px !important;
}

.marginTop10 {
	margin-top: 10px !important;
}

.marginTop20 {
	margin-top: 20px !important;
}

.marginBottom5 {
	margin-bottom: 5px !important;
}

.marginBottom10 {
	margin-bottom: 10px !important;
}

.marginBottom15 {
	margin-bottom: 15px !important;
}

.marginBottom20 {
	margin-bottom: 20px !important;
}

.padding5 {
	padding: 5px !important;
}

.paddingLeft10 {
	padding-left: 10px !important;
}

.paddingLeft20 {
	padding-left: 20px !important;
}


/**
 * 多选框样式======================================================
 */

.circle-checkbox,
.square-checkbox {
	position: relative;
	float: left;
	width: 20px;
	height: 20px;
	border: 1px solid #D1D1D1;
	border-radius: 50%;
}

.square-checkbox {
	border-radius: 2px;
}

.circle-checkbox label,
.square-checkbox label {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	width: 20px;
	height: 20px;
	cursor: pointer;
}

.circle-checkbox label:after,
.square-checkbox label:after {
	position: absolute;
	top: 5px;
	left: 4px;
	width: 10px;
	height: 6px;
	border: 2px solid #31B4E2;
	border-top: none;
	border-right: none;
	background: 0 0;
	content: "";
	opacity: 0;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.circle-checkbox input[type=checkbox],
.square-checkbox input[type=checkbox] {
	visibility: hidden;
}

.circle-checkbox input[type=checkbox]:checked+label:after,
.square-checkbox input[type=checkbox]:checked+label:after {
	opacity: 1;
}


/*=========================================================*/


/*========================滚动栏样式===========================*/

.scrollStyle::-webkit-scrollbar-track {
	border-radius: 10px;
	background-color: #F5F5F5;
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}

.scrollStyle::-webkit-scrollbar {
	width: 5px;
	background-color: #F5F5F5;
}

.scrollStyle::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background-color: #31b4e2;
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}


/*=========================================================*/


/**
 * 置灰 =====================================================
 */

.gray {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
	filter: gray;
}


/*==========================================================*/


/**
 * 添加边框===============================================
 */

.addborder_red {
	border: 1px solid red;
}

.addborder_blue {
	border: 1px solid blue;
}


/*==============================================================*/


/* 禁止选中文本 */

.usn {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}


/* 浮动 */

.fl {
	float: left;
}

.fr {
	float: right;
}

.cf {
	zoom: 1;
}

.cf:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
	overflow: hidden;
}


/* 元素类型 */

.db {
	display: block;
}

.dn {
	display: none;
}

.di {
	display: inline
}

.dib {
	display: inline-block;
}

.transparent {
	opacity: 0
}


/*文字排版、颜色*/

.f12 {
	font-size: 12px
}

.f14 {
	font-size: 14px
}

.f16 {
	font-size: 16px
}

.f18 {
	font-size: 18px
}

.f20 {
	font-size: 20px
}

.fb {
	font-weight: bold
}

.fn {
	font-weight: normal
}

.t2 {
	text-indent: 2em
}

.red,
a.red {
	color: #cc0031
}

.darkblue,
a.darkblue {
	color: #039
}

.gray,
a.gray {
	color: #878787
}

.lh150 {
	line-height: 150%
}

.lh180 {
	line-height: 180%
}

.lh200 {
	line-height: 200%
}

.unl {
	text-decoration: underline;
}

.no_unl {
	text-decoration: none;
}

.tl {
	text-align: left;
}

.tc {
	text-align: center;
}

.tr {
	text-align: right;
}

.tj {
	text-align: justify;
	text-justify: inter-ideograph;
}

.wn {
	/* 强制不换行 */
	word-wrap: normal;
	white-space: nowrap;
}

.wb {
	/* 强制换行 */
	white-space: normal;
	word-wrap: break-word;
	word-break: break-all;
}

.wp {
	/* 保持空白序列*/
	overflow: hidden;
	text-align: left;
	white-space: pre-wrap;
	word-wrap: break-word;
	word-break: break-all;
}

.wes {
	/* 多出部分用省略号表示 , 用于一行 */
	overflow: hidden;
	word-wrap: normal;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.wes-2 {
	/* 适用于webkit内核和移动端 */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.wes-3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.wes-4 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}


/* 溢出样式 */

.ofh {
	overflow: hidden;
}

.ofs {
	overflow: scroll;
}

.ofa {
	overflow: auto;
}

.ofv {
	overflow: visible;
}


/* 定位方式 */

.ps {
	position: static;
}

.pr {
	position: relative;
	zoom: 1;
}

.pa {
	position: absolute;
}

.pf {
	position: fixed;
}


/* 垂直对齐方式 */

.vt {
	vertical-align: top;
}

.vm {
	vertical-align: middle;
}

.vb {
	vertical-align: bottom;
}


/* 鼠标样式 */

.csd {
	cursor: default;
}

.csp {
	cursor: pointer;
}

.csh {
	cursor: help;
}

.csm {
	cursor: move;
}


/* flex布局 */

.df-sb {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.df-sa {
	display: flex;
	align-items: center;
	justify-content: space-around;
}


/* 垂直居中 */

.df-c {
	display: flex;
	align-items: center;
	justify-content: center;
}

.tb-c {
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}

.ts-c {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.ts-mc {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto;
}


/* 辅助 */

.mask-fixed-wrapper {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	background: rgba(0, 0, 0, 0.65);
	z-index: 999;
}

.bg-cover {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.bg-cover-all {
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
}